<!DOCTYPE html>
<html>
  <head lang="zh">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,user-scalable=0"
    />
    <title>Luckysheet</title>

    <link rel="stylesheet" href="./plugins/css/pluginsCss.css" />
    <link rel="stylesheet" href="./plugins/plugins.css" />
    <link rel="stylesheet" href="./css/luckysheet.css" />
    <link rel="stylesheet" href="./assets/iconfont/iconfont.css" />
    <script src="./plugins/js/plugin.js"></script>

    <!-- rollup luckysheet.js -->
    <script src="./luckysheet.umd.js"></script>
  </head>

  <body>
    <button onclick="getSheet()">测试</button>
    <div
      id="luckysheet"
      style="
        margin: 50px;
        padding: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
      "
    ></div>
    <!-- demo feature, non-production use -->
    <script src="./demoData/demoFeature.js"></script>
    <script src="./demoData/sheetFormula.js"></script>
    <script src="./demoData/sheetCell.js"></script>
    <script src="./demoData/sheetConditionFormat.js"></script>
    <script src="./demoData/sheetTable.js"></script>
    <script src="./demoData/sheetComment.js"></script>
    <script src="./demoData/sheetPivotTableData.js"></script>
    <script src="./demoData/sheetPivotTable.js"></script>
    <script src="./demoData/sheetSparkline.js"></script>
    <script src="./demoData/sheetChart.js"></script>
    <script src="./demoData/sheetPicture.js"></script>
    <script src="./demoData/sheetDataVerification.js"></script>
    <script src="./demoData/default.js"></script>

    <script>
      $(function () {
        // According to the browser language
        var lang = luckysheetDemoUtil.language() === "zh" ? "zh" : "en";

        options = {
          container: "luckysheet",
          lang: lang,
          forceCalculation: false,
          plugins: ["chart"],
          fontList: [
            {
              fontName: "HanaleiFill",
              url: "./assets/iconfont/HanaleiFill-Regular.ttf",
            },
            {
              fontName: "Anton",
              url: "./assets/iconfont/Anton-Regular.ttf",
            },
            {
              fontName: "Pacifico",
              url: "./assets/iconfont/Pacifico-Regular.ttf",
            },
          ],
          hook: {
            cellDragStop: function (cell, postion, sheetFile, ctx, event) {
              // console.info(cell, postion, sheetFile, ctx, event);
            },
            rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
              // console.log(rowNum);
            },
            rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
              // console.log(ctx);
            },
            columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
              // console.log(columnAbc);
            },
            columnTitleCellRenderAfter: function (columnAbc, postion, ctx) {
              // console.log(postion);
            },
            cellRenderBefore: function (cell, postion, sheetFile, ctx) {
              // console.log(cell,postion,sheetFile,ctx);
            },
            cellRenderAfter: function (cell, postion, sheetFile, ctx) {
              // console.log(postion);
            },
            cellMousedownBefore: function (cell, postion, sheetFile, ctx) {
              // console.log(postion);
            },
            cellMousedown: function (cell, postion, sheetFile, ctx) {
              // console.log('单元格鼠标按下',sheetFile);
            },
            sheetMousemove: function (
              cell,
              postion,
              sheetFile,
              moveState,
              ctx
            ) {
              // console.log(cell,postion,sheetFile,moveState,ctx);
            },
            sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
              // console.log(cell,postion,sheetFile,moveState,ctx);
            },
            cellAllRenderBefore: function (data, sheetFile, ctx) {
              // console.info(data,sheetFile,ctx)
            },
            updated: function (operate) {
              // console.info('更新',operate)
            },
            cellUpdateBefore: function (r, c, value, isRefresh) {
              // console.info('cellUpdateBefore',r,c,value,isRefresh)
            },
            cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
              // console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
            },
            sheetActivate: function (index, isPivotInitial, isNewSheet) {
              // console.info(index, isPivotInitial, isNewSheet)
            },
            rangeSelect: function (index, sheet) {
              console.info(sheet);
              getRange()
            },
            commentInsertBefore: function (r, c) {
              // console.info(r, c)
            },
            commentInsertAfter: function (r, c, cell) {
              // console.info(r, c, cell)
            },
            commentDeleteBefore: function (r, c, cell) {
              // console.info(r, c, cell)
            },
            commentDeleteAfter: function (r, c, cell) {
              // console.info(r, c, cell)
            },
            commentUpdateBefore: function (r, c, value) {
              // console.info(r, c, value)
            },
            commentUpdateAfter: function (r, c, oldCell, newCell) {
              // console.info(r, c, oldCell, newCell)
            },
            cellEditBefore: function (range) {
              // console.info(range)
            },
            workbookCreateAfter: function (json) {
              // console.info(json)
            },
            rangePasteBefore: function (range, data) {
              // console.info('rangePasteBefore',range,data)
              // return false; //Can intercept paste
            },
          },
          data: [
            defaultSheet,
            // sheetCell,
            // sheetFormula,
            // sheetConditionFormat,
            // sheetSparkline,
            // sheetTable,
            // sheetComment,
            // sheetPivotTableData,
            // sheetPivotTable,
            // sheetChart,
            // sheetPicture,
            // sheetDataVerification,
          ],
        };

        options.loading = {
          image: () => {
            return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`;
          },
          imageClass: "loadingAnimation",
        };
        options.cellRightClickConfig = {
          customs: [
            {
              title: "测试",
              onClick: function (clickEvent, event, params) {
                console.log("function test click", clickEvent, event, params);
              },
            },
          ],
        };
        luckysheet.create(options);
      });
      function getSheet() {
        console.log(luckysheet.getAllSheets());
        console.log(luckysheet.toJson());
      }
      function getRange() {
        console.log('选取',luckysheet.getRangeAxis(),luckysheet.getRange());
      }
    </script>

    <style>
      /* 自定义loading演示样式 */
      @keyframes loading-rotate {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes loading-dash {
        0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -40px;
        }

        100% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -120px;
        }
      }

      .loadingAnimation {
        width: 3em;
        height: 3em;
        animation: loading-rotate 2s linear infinite;
      }

      .loadingAnimation circle {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: currentColor;
        stroke-linecap: round;
      }
    </style>
  </body>
</html>
